<%@ page language="java" contentType="text/html;charset=utf-8" %>
<!doctype html>
<html lang="zh">
<head>
	<meta charset="utf8"/>
	<title>前后端分离演示</title>
</head>

<body>
<div id="main">
	<div class="login-row">
		<div class="login-panel">
			<img class="login-bg" src="/login-bg.svg" type="image/svg+xml"/>
			<div class="input-panel">
				<ul v-if="!user.authenticated">
					<li>
						<span>用户名：</span><input type="text" v-model="user.username"/>
					</li>
					<li>
						<span>密　码：</span><input type="password" v-model="user.password">
					</li>
					<li>
						<button @click="login">确 定</button>
						<div style="width: 14px;"></div>
						<button @click="clearUser()">重 置</button>
					</li>
				</ul>
				<ul v-if="user.authenticated">
					<li class="username">{{user.name}}</li>
					<li>
						<button @click="logout">退出登录</button>
					</li>
				</ul>
			</div>
			<div class="error-message">{{errorMessage}}</div>
		</div>
	</div>

	<div class="api-result-row">
		<div class="api-panel">
			<button @click="getUserBooks">书籍列表</button>
			<button @click="getSystemInfo">系统信息</button>
		</div>
		<div class="monitor-panel-wrapper">
			<div class="monitor-panel">
				<div class="monitor-screen">
					<pre>{{responseContent}}</pre>
				</div>
				<div class="monitor-base-connect-bar"></div>
				<div class="monitor-base"></div>
			</div>
		</div>
	</div>
</div>
</body>

<script src="/vue.min.js" type="text/javascript"></script>
<script src="/axios.min.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#main',
  data: function (){
    return {
	  user: {
		username: null,
		password: null,
		authenticated: false
	  },
	  errorMessage: null,
	  responseContent: "当前没有ajax请求"
	}
  },
  methods: {
	login: function() {
	  this.clearError()
	  axios({
		method: 'get',
		url: '/api/auth/login',
		params: {
			username: this.user.username,
			password: this.user.password
		}
	  }).then(resp => {
		this.user.authenticated = true
		this.user.name=resp.data.data.user.name
		this.responseContent = 'GET /api/auth/login  StatusCode: 200\n' + JSON.stringify(resp.data, null, 4);
	  }).catch(err => {
		let errResp = err.response
		if(errResp.status === 401 || errResp.status === 400){
		  this.errorMessage = errResp.data.data || errResp.data.errorMessage
		}else {
		  this.errorMessage = err.message
		}
		this.responseContent = 'GET /api/auth/login  StatusCode: ' + errResp.status + '\n' + JSON.stringify(errResp.data, null, 4);
	  });
	},
	clearError: function() {
	  this.errorMessage = null
	},
	logout: function() {
	  this.clearError()
	  this.user={authenticated: false}
	},
	clearUser: function() {
	  this.clearError()
	  this.user = {}
	},
	getUserBooks : function () {
	  this.getForUrl('/api/app/books')
	},
	getSystemInfo: function() {
	  this.getForUrl('/api/app/system')
	},
	getForUrl: function(url) {
	  this.clearError()
	  axios.get(url).then(resp => {
		this.responseContent = 'GET ' + url + '  StatusCode: 200\n' + JSON.stringify(resp.data, null, 4);
	  }).catch(err => {
		let errResp = err.response
		if(errResp.status === 401 || errResp.status === 400){
		  this.errorMessage = errResp.data.data || errResp.data.errorMessage
		}else {
		  this.errorMessage = err.message
		}
		this.responseContent = 'GET ' + url + '  StatusCode: ' + errResp.status + '\n' + JSON.stringify(errResp.data, null, 4);
	  });
	}
  }
})
</script>
<style>
body {
	padding: 0; margin:0;
	background-color: #00eebf;
}
button {
	height: 26px;
	color: #fff;
	background-color: #3282F6;
	border: none;
	padding: 2px 12px 5px 12px;
	border-radius: 3px;
}
input[type="text"] input[type="password"]{
	height: 22px;
}
button:hover{
	cursor: pointer;
	background-color: #0023F5;
}
.login-row {
	height: 280px;
	background-color: #F0F0F0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.login-row .login-panel {
	width: 600px;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.login-row .login-panel .login-bg {
	width: 300px;
	height: 300px;
	position: absolute;
	right: 0;
	bottom: -48px;
	z-index: 10;
}
.login-row .login-panel .input-panel {
	margin: 0;
	border: 5px solid #329C8F;
	min-width: 240px;
	padding: 20px 16px;
	background-color: #fff;
	position: absolute;
	bottom: 92px;
	right: 262px;
	z-index: 20;
}
.login-row .login-panel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.login-row .login-panel li {
	margin-top: 16px;
}
.login-row .login-panel li:nth-child(1) {
	margin-top: 0;
}
.login-row .login-panel li:last-child {
	display: flex;
	justify-content: center;
}
.username {
	color:#329C8F;
	font-size: 48px;
	font-weight: bold;
	text-align: center;
}
.login-row .login-panel .error-message {
	position: absolute;
	bottom: 40px;
	left: 60px;
	color: red;
	text-align: center;
	z-index: 30;
}


.api-result-row {
	display: flex;
	justify-content: center;
	padding-top: 14px;
}
.api-result-row .api-panel{
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
}
.api-result-row .api-panel button {
	width: 180px;
	height: 60px;
	margin-top: 14px;
	margin-right: 16px;
	font-size: 18px;
}
.api-result-row .monitor-panel-wrapper {
	width: 60%;
	display: flex;
	align-items: center;
}
.api-result-row .monitor-panel-wrapper .monitor-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
}
.monitor-screen {
	height: 240px;
	min-width: 380px;
	max-width: 440px;
	border: 6px solid #732BF5;
	border-radius: 6px;
}
.monitor-base-connect-bar{
	width: 32px;
	height: 12px;
	background-color: #732BF5;
}
.monitor-base{
	width: 70px;
	height: 10px;
	background-color: #732BF5;
	border-radius: 3px;
}
.api-result-row .monitor-panel-wrapper .monitor-panel pre {
	direction: ltr;
	padding: 12px;
	overflow: auto;
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	color:#c4c0c0;
	background-color: #2e2b2b;
}

</style>